<template>
	<view class="container">
		<!-- 顶部医院信息 -->
		<view class="hospital-info">
			<view class="hospital-info-container">
				<image class="hospital-image" :src="hospitalInfo.imgurl" mode="aspectFill" @error="handleImageError"></image>
				<view class="hospital-info-right">
					<view class="hospital-name">{{hospitalInfo.name}}</view>
					<view class="hospital-address">{{ hospitalInfo.address }}</view>
					<view class="hospital-time">正常营业 | 周一至周日 08:00-18:00</view>
				</view>
			</view>
		</view>
		
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input">
				<view class="search-input-box">
					<view class="search-icon-wrap">
						<image class="search-icon" src="/static/icons/search.png" mode="aspectFit"></image>
					</view>
					<input
						type="text"
						v-model="searchKeyword"
						placeholder="搜索科室"
						placeholder-class="placeholder"
						@input="onSearchInput"
						confirm-type="search"
						@confirm="onSearchConfirm"
					/>
					<view v-if="searchKeyword" class="clear-icon" @tap="clearSearch">
						<text class="clear-text">✕</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 科室列表 -->
		<scroll-view scroll-y class="department-scroll">
			<view class="department-item" v-for="(item, index) in filteredDepartments" :key="index" @click="navigateToDepartment(item)">
				<text class="department-name">{{item.name}}</text>
				<text class="arrow">></text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hospitalId: '',
				hospitalInfo: {
					id: '',
					name: '',
					imgurl: '',
					address: '',
					tags: []
				},
				searchKeyword: '',
				departments: [],
				originalDepartments: []
			}
		},
		computed: {
			filteredDepartments() {
				if (!this.searchKeyword) return this.departments;
				const keyword = this.searchKeyword.toLowerCase();
				return this.departments.filter(dep => 
					dep.name.toLowerCase().includes(keyword)
				);
			}
		},
		onLoad(options) {
			console.log('科室页面接收到的参数:', options)
			if (!options || !options.id) {
				console.error('未接收到医院ID')
				uni.showToast({
					title: '未找到医院信息',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
				return
			}
			
			this.hospitalId = options.id
			console.log('设置医院ID:', this.hospitalId)
			// 获取医院详情
			this.getHospitalDetail(this.hospitalId)
			// 获取科室列表
			this.getDepartmentList()
		},
		methods: {
			clearSearch() {
				this.searchKeyword = '';
				this.departments = [...this.originalDepartments];
			},
			
			onSearchInput(e) {
				const value = e.detail.value;
				this.searchKeyword = value;
			},
			
			onSearchConfirm(e) {
				const value = e.detail.value;
				this.doSearch(value);
			},
			
			doSearch(value) {
				if (!value || value.trim() === '') {
					this.departments = [...this.originalDepartments];
					return;
				}
			},
			
			// 获取科室列表
			getDepartmentList() {
				console.log('开始获取科室列表');
				const queryPageBean = {
					hospitalId: this.hospitalId,
					currentPage: 1,
					pageSize: 10
				};
				uni.request({
					url: 'http://localhost:8090/hospital/findDepByHospitalId',
					method: 'POST',
					data: queryPageBean,
					header: {
						'Content-Type': 'application/json'
					},
					success: (res) => {
						console.log('获取科室列表成功:', res);
						if (res.statusCode === 200) {
							this.departments = res.data.rows;
							this.originalDepartments = [...this.departments];
							console.log('设置后的科室列表:', this.departments);
						} else {
							uni.showToast({
								title: res.data.msg || '获取科室列表失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('获取科室列表请求失败:', err);
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						});
					}
				});
			},
			
			getHospitalDetail(id) {
				console.log('开始获取医院详情, id:', id)
				if (!id) {
					console.error('医院ID为空')
					return
				}
				
				uni.request({
					url: `http://localhost:8090/hospital/${id}`,
					method: 'GET',
					success: (res) => {
						console.log('获取医院详情成功:', res)
						if (res.statusCode === 200 && res.data.code === 200) {
							const hospital = res.data.data
							if (hospital.name) {
								uni.setNavigationBarTitle({
									title: hospital.name
								})
							}
							// 更新基本信息
							this.hospitalInfo = {
								...this.hospitalInfo,
								id: hospital.id,
								name: hospital.name,
								imgurl: hospital.imgurl || '/static/images/hospital.png'
							}
							// 获取医院的地址信息
							if (hospital.addressId) {
								this.getAddressById(hospital.addressId, hospital)
							}
						} else {
							uni.showToast({
								title: res.data.msg || '获取医院详情失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						console.error('获取医院详情请求失败:', err)
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						})
					}
				})
			},
			
			getAddressById(addressId, hospital) {
				console.log('开始获取地址信息, addressId:', addressId)
				
				uni.request({
					url: `http://localhost:8090/address/${addressId}`,
					method: 'GET',
					success: (res) => {
						console.log('获取地址信息成功:', res)
						if (res.statusCode === 200 && res.data.code === 200) {
							const address = res.data.data
							// 更新医院信息
							this.hospitalInfo = {
								...this.hospitalInfo,
								address: `${address.province}${address.city}${address.district}${address.detailedAddress}`,
								tags: ['医院', `医生数量: ${hospital.doctorsNum}`]
							}
						} else {
							this.hospitalInfo = {
								...hospital,
								address: '地址未知'
							}
						}
					},
					fail: (err) => {
						console.error(`获取地址ID ${addressId} 失败:`, err)
						this.hospitalInfo = {
							...hospital,
							address: '地址未知'
						}
					}
				})
			},
			
			handleImageError() {
				console.error('医院图片加载失败:', this.hospitalInfo.imgurl)
				this.hospitalInfo.imgurl = '/static/images/hospital.png'
			},
			
			navigateToDepartment(department) {
				// 跳转到科室医生列表页面
				uni.navigateTo({
					url: `/pages/doctor/depDoclist?hospitalId=${this.hospitalId}&departmentId=${department.id}`,
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.hospital-info {
	background: #fff;
	padding: 20rpx;
}

.hospital-info-container {
	display: flex;
	gap: 20rpx;
}

.hospital-image {
	width: 240rpx;
	height: 180rpx;
	border-radius: 8rpx;
}

.hospital-info-right {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.hospital-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-top: 10rpx;
	margin-bottom: 30rpx;
}

.hospital-address {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 4rpx;
}

.hospital-time {
	font-size: 24rpx;
	color: #666;
}

.search-bar {
	background: #fff;
	padding: 20rpx;
	margin-top: 20rpx;
	
	.search-input {
		background-color: #f5f5f5;
		border-radius: 32rpx;
		
		.search-input-box {
			display: flex;
			align-items: center;
			padding: 8rpx 20rpx;
			
			.search-icon-wrap {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 36rpx;
				height: 36rpx;
				margin-right: 12rpx;
				
				.search-icon {
					width: 28rpx;
					height: 28rpx;
					opacity: 0.7;
				}
			}
			
			input {
				flex: 1;
				height: 52rpx;
				font-size: 26rpx;
				color: #333;
				padding: 0 8rpx;
			}
			
			.placeholder {
				color: #bbb;
				font-size: 26rpx;
			}
			
			.clear-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				background-color: #e0e0e0;
				margin-left: 12rpx;
				
				.clear-text {
					color: #999;
					font-size: 22rpx;
					line-height: 1;
				}
			}
		}
	}
}

.department-scroll {
	background: #fff;
	margin-top: 20rpx;
}

.department-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	&:last-child {
		border-bottom: none;
	}
	
	.department-name {
		font-size: 28rpx;
		color: #333;
	}
	
	.arrow {
		color: #999;
		font-size: 24rpx;
	}
}
</style>
